<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { useUserStore } from "@/store";
import { suggest } from "@/apis";

const userStore = useUserStore();

const suggestMessage = ref("");
const suggestHandler = () => {
  if (suggestMessage.value == "") {
    ElMessage({
      message: "请输入内容！",
      type: "warning",
    });
  } else {
    suggest(suggestMessage.value, userStore.getUID).then((res) => {
      suggestMessage.value = "";
      ElMessage({
        message: "感谢您的反馈！",
        type: "success",
      });
    });
  }
};
</script>

<template>
  <div>
    <h3>
      为了使本系统更加完善，如您在使用过程中发现本系统存在可改进的地方，请您提供您的宝贵建议！感谢您的建议！
    </h3>
    <div class="suggest-bar">
      <el-input type="textarea" v-model="suggestMessage" rows="5"></el-input>
      <div class="spacer"></div>
      <el-button
        @click="suggestHandler"
        type="primary"
        plain
        class="suggest-button"
      >
        告诉作者
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.spacer {
  margin-top: 10px; /* 上边距 */
  margin-bottom: 10px; /* 下边距 */
}

.suggest-bar {
}

.suggest-button {
  display: block;
  margin: 0 auto;
}
</style>
